<template>
  <el-form
    style="margin-left: 30px;width: 460px;"
    label-width="140px"
    :model="form"
    ref="rulesForm"
  >
    <el-form-item
      :label="isEdit ? '营业执照名称' : '营业执照名称:'"
      prop="certificateName"
      :rules="vd ? getRules('input', '营业执照名称'): getRules('no-required')"
    >
      <el-input
        v-if="isEdit"
        v-model.trim="form.certificateName"
        placeholder="营业执照名称"
        maxlength="50"
        clearable
      ></el-input>
      <span v-else>{{subForm.certificateName}}</span>
    </el-form-item>
    <el-form-item
      :label="isEdit ? '统一社会信用代码' : '统一社会信用代码:'"
      prop="certificateNo"
      :rules="vd ? getRules('input', '统一社会信用代码') : getRules('no-required')"
    >
      <el-input
        v-if="isEdit"
        v-model.trim="form.certificateNo"
        placeholder="统一社会信用代码"
        clearable
        maxlength="50"
      ></el-input>
      <span v-else>{{subForm.certificateNo}}</span>
    </el-form-item>
    <el-form-item
      :label="isEdit ? '法定代表人' : '法定代表人:'"
      prop="legalPerson"
      :rules="vd ? getRules('input', '法定代表人') : getRules('no-required')"
    >
      <el-input
        v-if="isEdit"
        v-model.trim="form.legalPerson"
        placeholder="法定代表人"
        clearable
        maxlength="20"
      ></el-input>
      <span v-else>{{subForm.legalPerson}}</span>
    </el-form-item>
    <el-form-item
      :label="isEdit ? '经营场所/住所' : '经营场所/住所:'"
      prop="place"
      :rules="vd ? getRules('input', '经营场所/住所') : getRules('no-required')"
    >
      <el-input
        v-if="isEdit"
        v-model.trim="form.place"
        placeholder="经营场所/住所"
        clearable
        maxlength="50"
      ></el-input>
      <span v-else>{{subForm.place}}</span>
    </el-form-item>
    <el-form-item
      :label="isEdit ? '营业执照有效期' : '营业执照有效期:'"
      :prop="form.longValid ? 'longValid' : 'validityDateEnd'"
      :rules="vd ? getRules('required', '营业执照有效期') : getRules('no-required')"
    >
      <div v-if="isEdit">
        <el-radio-group v-model="form.longValid">
          <el-radio :label="1">长期有效</el-radio>
          <el-radio :label="0">固定日期</el-radio>
        </el-radio-group>
        <el-date-picker
          v-if="!form.longValid"
          v-model="form.validityDateEnd"
          style="width: 100%"
          type="date"
          placeholder="证件有效期"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </div>
      <span v-else>{{!subForm.longValid ? subForm.validityDateEnd : '长期有效'}}</span>
    </el-form-item>
    <el-form-item
      :label="isEdit ? '注册/成立时间' : '注册/成立时间:'"
      prop="regDate"
      :rules="vd ? getRules('required', '注册/成立时间') : getRules('no-required')"
    >
      <el-date-picker
        v-if="isEdit"
        v-model="form.regDate"
        type="date"
        style="width: 100%"
        placeholder="注册/成立时间"
        value-format="yyyy-MM-dd"
      >
      </el-date-picker>
      <span v-else>{{subForm.regDate}}</span>
    </el-form-item>
    <el-form-item
      :label="isEdit ? '发证/登记机关' : '发证/登记机关:'"
      prop="register"
      :rules="vd ? getRules('input', '发证/登记机关') : getRules('no-required')"
    >
      <el-input
        v-if="isEdit"
        v-model.trim="form.register"
        placeholder="发证/登记机关"
        clearable
        maxlength="50"
      ></el-input>
      <span v-else>{{subForm.register}}</span>
    </el-form-item>
    <el-form-item
      :label="isEdit ? '核准日期' : '核准日期:'"
      prop="approvalData"
      :rules="vd ? getRules('required', '核准日期') : getRules('no-required')"
    >
      <el-date-picker
        v-if="isEdit"
        v-model="form.approvalData"
        type="date"
        style="width: 100%"
        placeholder="核准日期"
        value-format="yyyy-MM-dd"
      >
      </el-date-picker>
      <span v-else>{{subForm.approvalData}}</span>
    </el-form-item>
  </el-form>
</template>

<script>
import getRules from "@/validUtils";
let ol = {
  fileUrl: "",
  certificateName: "",
  legalPerson: "",
  place: "",
  regDate: "",
  approvalData: "",
  register: "",
  validityDateEnd: "",
  certificateNo: "",
  longValid: 1,
};
export default {
  name: "qf-business",
  props: {
    add: {
      type: Boolean,
      default: true,
    },
    showEdit: {
      type: Boolean,
      default: true,
    },
    subForm: {
      type: Object,
      default: () => {},
    },
    vf: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    vd() {
      if (this.showEdit && this.vf) {
        return true;
      } else {
        return false;
      }
    },
  },
  watch: {
    showEdit: {
      handler(val) {
        this.isEdit = val;
        if (!this.isEdit) {
          this.$nextTick(() => {
            this.$refs.rulesForm.clearValidate();
          });
        }
      },
      immediate: true,
    },
    subForm: {
      handler(val) {
        if (JSON.stringify(val) != "{}") {
          this.form = Object.structure({}, this.form, val);
          if (val.uuid) {
            this.form.uuid = val.uuid;
          }
        } else {
          this.form = { ...ol };
        }
      },
      immediate: true,
    },
    form: {
      handler(val) {
        this.$emit("changeForm", val);
      },
      deep: true,
    },
  },
  data() {
    return {
      isEdit: true,
      getRules: getRules,
      form: { ...ol },
    };
  },
  created() {},
  methods: {
    submit() {
      return new Promise((resolve, reject) => {
        if (!this.isCheckForm() && !this.form.uuid) {
          this.form._uuid = new Date().getTime();
        }
        if (this.vd) {
          this.$refs.rulesForm.validate((valid) => {
            if (valid) {
              resolve(this.form);
            } else {
              console.log("error submit!!");
              reject({ code: 110, data: this.form, msg: "验证失败请检测代码" });
              return false;
            }
          });
        } else {
          resolve(this.form);
        }
      });
    },
    // 判断提交的表单是否整个属性为空值 bb:true代表属性无值的状态，bb:false代表属性有值的状态
    isCheckForm() {
      let bb = true;
      for (let key in this.form) {
        let b = this.form[key] === 0 || this.form[key];
        if (b) {
          bb = false;
          break;
        }
      }
      return bb;
    },
  },
};
</script>

<style lang="less" scoped>
.qf-image__lazy {
  width: 178px;
}
.qf-info-container {
  position: relative;
  display: flex;
  justify-content: flex-start;
}
</style>
